<template>
  <!-- 绘制弹框 -->
  <el-dialog :title="'修改权限'" :visible.sync="dialsgShow" width="50%" @close="btnCancel">
    <el-form ref="form" :model="fromdata" :rules="formRulers" label-width="100px" :inline="false" size="normal">
      <el-row type="flex">
        <el-form-item label="归属学科" prop="subject_id" size="normal" style="width:360px">
          <el-select v-model="fromdata.subject_id" placeholder="请选择">
            <el-option v-for="item in subjectList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item prop="class_name" label="班级名次" style="width:360px">
          <el-input v-model="fromdata.class_name" />
        </el-form-item>
      </el-row>

      <el-row type="flex">
        <el-form-item prop="manager_info" label="授课老师" size="normal" style="width:360px">
          <el-select v-model="fromdata.manager_info" placeholder="请选择" multiple value-key="user_id">
            <!-- <template slot-scope="{row}"> -->
            <el-option v-for="item in TalkTeacher" :key="item.id" :label="item.username" :value="item.user_id" />
            <!-- <el-button v-for="item,index in JSON.parse(row.teacher_info)" :key="index" type="primary" plain disabled size="mini">
                {{ item.username }}
              </el-button> -->
            <!-- </template> -->

          </el-select>
        </el-form-item>
        <el-form-item prop="zhujiao_info" label="助教老师" size="normal" style="width:360px">
          <el-select v-model="fromdata.zhujiao_info" placeholder="请选择" multiple value-key="user_id">
            <el-option v-for="item in HelpTeacher" :key="item.id" :label="item.username" :value="item.user_id" />
          </el-select>
        </el-form-item>
      </el-row>

      <el-row type="flex">
        <el-form-item prop="teacher_info" label="班主任老师" size="normal" style="width:360px">
          <el-select v-model="fromdata.teacher_info" placeholder="请选择" multiple value-key="user_id">
            <el-option v-for="item in CalssAdmin" :key="item.id" :label="item.username" :value="item.user_id" />
          </el-select>
        </el-form-item>
        <el-form-item label="开课结课日期" size="normal" style="width:240px">
          <el-date-picker
            v-model="fromdata.start_time"
            style="width:300px"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @blur="btnok"
          />
        </el-form-item>
      </el-row>

      <el-row type="flex">
        <el-form-item label="排序" size="normal" style="width:360px">
          <el-input-number v-model="fromdata.sort" :min="1" :max="55" label="描述文字" />
        </el-form-item>
        <el-form-item label="班级状态" size="normal" style="width:360px">
          <el-switch v-model="fromdata.state" inactive-text="关闭" active-text="正常" :active-value="1" :inactive-value="2" />
        </el-form-item>
      </el-row>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button @click="dialsgShow=false">取消</el-button>
      </el-form-item>
    </el-form>

  </el-dialog>
</template>

<script>
import { addClassAPI, eritclass, getClass } from '@/api/class.js'
export default {
  name: 'AddClass',
  data() {
    return {
      // 弹框控制变量
      dialsgShow: false,
      fromdata: {
        class_name: '',
        end_time: '',
        manager_info: [],
        sort: '',
        start_time: '',
        state: '',
        subject_id: '',
        zhujiao_info: [],
        teacher_info: []
      },
      TalkTeacher: {},
      HelpTeacher: {},
      CalssAdmin: {},
      subjectList: {},
      zhujiao: [],
      jiangshi: [],
      banren: [],
      formRulers: {
        class_name: [{ required: true, message: '请输入', trigger: 'blur' }],
        subject_id: [{ required: true, message: '请输入', trigger: 'change' }]
      }
    }
  },

  created() {

  },
  methods: {
    async onSubmit() {
      // 表单校验
      await this.$refs.form.validate()
      // 加工数据//发送请求 有行id吗 有是修改弹窗 没有是添加
      this.fromdata.id ? await eritclass(this.fromdata) : await addClassAPI(this.fromdata)
      // 提示消息
      this.$message.success('操作成功')
      // 关闭
      this.showDialog = false
      // 更新
      this.$emit('updateList')
    },
    btnCancel() {
      this.$refs.form.clearValidate()
      this.fromdata = {
        class_name: '',
        end_time: '',
        manager_info: '',
        sort: '',
        start_time: '',
        state: '',
        subject_id: '',
        zhujiao_info: '',
        teacher_info: ''
      }
    },
    // 修改 回显方法
    async editRow(id) {
      console.log(id)
      const res = await getClass(id)
      // console.log(res)
      this.fromdata = res
      this.fromdata.manager_info = JSON.parse(res.manager_info)
      this.fromdata.teacher_info = JSON.parse(res.teacher_info)
      this.fromdata.zhujiao_info = JSON.parse(res.zhujiao_info)
      console.log(this.fromdata.manager_info)
      console.log(this.fromdata.teacher_info)
      console.log(this.fromdata.zhujiao_info)
      // this.manager_info = JSON.parse(res.manager_info)
      // console.log(this.manager_info)

      this.dialsgShow = true
    },
    btnok(event) {
      console.log(event)
    }
  }
}
</script>

<style>

</style>
